import { nanoid } from 'nanoid';
import { nextTick, ref } from 'vue';
import { resolutionList } from '../layout/init';
import { message } from 'ant-design-vue';
import { type IStage, IColor, IDeviceColor } from '../types/IStage';

/* 切换侧边栏模式 */
export const propMode = ref(true);

export const stageObject: IStage = {
  w: 240,
  h: 128,
  id: '',
  backgroundColor: IColor.WHITE,
  scale: 1.6,
  rotate: 0,
  draggable: false,
  showRule: true,
  customSize: false,
  showSubline: false,
  showSize: true,
  ghostHandle: false,
  deviceColor: IDeviceColor.BWR,
  name: nanoid().slice(0, 8),
  resolutionId: '',
  /* 需要删除 */
  templateColor: IColor.WHITE,
  templateId: '',
  goodsId: '',
  type: 0,
  showOutline: true,
  version: '甲',
  split: '0',
  subs: [],
  components: [],
  lcd: false,
  flipX: false,
  swap: false,
};

export const stageConfig = ref<IStage>({
  ...stageObject,
});

export const currentStage = ref<IStage>({
  ...stageObject,
});

export const resetStage = () => {
  stageConfig.value = {
    ...stageObject,
  };
};

/* 是否允许粘贴 */
export const allowPaste = ref(true);

/* 属性显示的模式，用于切换组件属性和画布属性 */
const COMPONENTS_MODE = false;
const STAGE_MODE = true;

/* 更新父容器，不然拖拽出bug */
export const updateStage = ref(0);
export const viewMode = ref(STAGE_MODE);

/* 设成画布模式 */
export const setStageMode = () => {
  viewMode.value = STAGE_MODE;
};

/* 设成组件模式 */
export const setComponentMode = () => {
  viewMode.value = COMPONENTS_MODE;
};

/**
 * 注释: 设置手柄大小
 *
 * */
export const setHandleScale = () => {
  /* 缩放手柄 */
  const handlers = document.querySelectorAll('.handle-tl , .handle-tr , .handle-bl,.handle-br');
  Array.from(handlers).forEach(dom => {
    const el = dom as HTMLElement;
    const size = 12 / stageConfig.value.scale;
    el.style.width = `${size}px `;
    el.style.height = `${size}px`;
  });
};

/* 隐藏手柄，主要用于框选 */
export const toggleHandle = (flag: boolean) => {
  /* 缩放手柄 */
  const handlers = document.querySelectorAll('.handle-tl , .handle-tr , .handle-bl,.handle-br');
  Array.from(handlers).forEach(dom => {
    const el = dom as HTMLElement;
    el.style.opacity = flag ? '1' : '0';
  });
};

/* 镂空手柄 */
export const setGhostHandle = (flag: boolean) => {
  /* 缩放手柄 */
  const handlers = document.querySelectorAll('.handle-tl , .handle-tr , .handle-bl,.handle-br');
  Array.from(handlers).forEach(dom => {
    const el = dom as HTMLElement;
    el.style.backgroundColor = flag ? 'transparent' : 'var(--primary)';
  });
};
/* 用于校正画布到中心位置 */
export const offsetDom = ref({
  left: 0,
  top: 0,
  dom: null,
});

/**
 * 注释: 设置子元素居中
 *
 * */
export const setChildCenter = () => {
  nextTick(() => {
    const parent = document.querySelector('.layout-content');
    if (!parent) return;
    const parentRect = parent.getBoundingClientRect();
    offsetDom.value.left =
      parentRect.width / 2 - (currentStage.value.w * currentStage.value.scale) / 2;
    offsetDom.value.top =
      parentRect.height / 2 - (currentStage.value.h * currentStage.value.scale) / 2;
  });
};

/* 设置画布大小尺寸 */
export const setStageSize = (w: number, h: number, scale: number) => {
  stageConfig.value.w = w;
  stageConfig.value.h = h;

  stageConfig.value.scale = scale;
  setChildCenter();
  updateStage.value += 1;
};

/* 设置尺寸，颜色 */
export const setStageInfo = (resolutionId: string) => {
  stageConfig.value.resolutionId = resolutionId;
};
/* 计算合适的尺寸 */
export const setPerfectScale = () => {
  const target = resolutionList.value.find(e => {
    if (e.resolutionId === stageConfig.value.resolutionId) {
      return e;
    }
    return null;
  });
  if (!target) {
    message.warning('error');
    return;
  }
  stageConfig.value.subs.forEach(e => {
    e.scale = target.scale;
  });
  setChildCenter();
};
export const resetScale = () => {
  stageConfig.value.subs.forEach(e => {
    e.scale = stageConfig.value.scale / 2;
  });
};

interface StageConfig {
  title: string;
  exec: any;
  icon: string;
  children?: StageConfig[];
}
/* 画布的菜单 */
export const stageContextmenu = ref<StageConfig[]>([
  {
    title: '尺寸自动适应',
    exec: () => {
      setPerfectScale();
    },
    icon: 'aspect-ratio',
  },
  {
    title: '原比例',
    exec: () => {
      stageConfig.value.scale = 1;
      setChildCenter();
    },
    icon: 'bounding-box-circles',
  },
  {
    title: '画布位置还原',
    exec: () => {
      setChildCenter();
    },
    icon: 'geo-alt',
  },
  // {
  //   title: "打开记事本",
  //   exec: () => {
  //     showNotepad("新的记事本", "");
  //   },
  //   icon: "book",
  // },
  {
    title: '辅助功能',
    exec: () => undefined,
    icon: 'columns-gap',
    children: [
      {
        title: '显示标尺',
        exec: () => {
          stageConfig.value.showRule = !stageConfig.value.showRule;
        },
        icon: 'rulers',
      },
      {
        title: '显示辅助线',
        exec: () => {
          stageConfig.value.showSubline = !stageConfig.value.showSubline;
        },
        icon: 'slash',
      },
      {
        title: '显示宽高',
        exec: () => {
          stageConfig.value.showSize = !stageConfig.value.showSize;
        },
        icon: 'arrows-angle-expand',
      },
    ],
  },
]);
